<template>
  <div class="add-model" style="flex: 1; padding: 20px; min-width: 0; background-color: #0e2f60; overflow-y: auto;">
		<el-form :model="form" :rules="rules" ref="form" label-width="80px">
		  <el-form-item label="模型名称" prop="name">
		    <el-input v-model="form.name" placeholder="请输入模型名称"></el-input>
		  </el-form-item>
		  <el-form-item label="模型目的" prop="purpose">
				<el-input type="textarea" placeholder="多行输入" v-model="form.purpose" rows="5"></el-input>
		  </el-form-item>
			<el-form-item 
				label="层级" 
				:prop="'foot.'+index+'.level' && 'foot.'+index+'.where'"
				:rules="{ required: true, message: '请选择层级或数据埋点', trigger: 'change'}" 
				v-for="(data,index) in form.foot" 
				:key="index">
				<div class="foot-item">
					<el-select v-model="data.level" placeholder="请选择层级" filterable clearable>
						<el-option v-for="(item,i) in leveList" :key="i" :label="item.label" :value="item.value">{{item.label}}</el-option>
					</el-select>
					<span class="label">数据埋点</span>
					<el-select v-model="data.where" filterable clearable>
						<el-option v-for="(item,i) in whereList" :key="i" :label="item" :value="item">{{item}}</el-option>
					</el-select>
					<i class="el-icon-circle-plus" @click="addLevel"></i>
					<i class="el-icon-delete" v-if="index!=0 || form.foot.length > 1" @click="delLevel(index)"></i>
				</div>
			</el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">{{form.data_model_id?'修改':'保存'}}</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		props: {
			modelData: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		data(){
			return{
				form: {
					name: '',
					purpose: '',
					foot: [{
						level: '',
						where: ''
					}]
				},
				rules: {
					name: [{required: true,message: '请输入模型名称',tigger: 'blur'}],
					purpose: [{required: true,message: '请输入模型目的',tigger: 'blur'}]
				},
				leveList: [{
					label: '1级',
					value: 1
				},{
					label: '2级',
					value: 2
				},{
					label: '3级',
					value: 3
				},{
					label: '4级',
					value: 4
				},{
					label: '5级',
					value: 5
				},{
					label: '6级',
					value: 6
				},{
					label: '7级',
					value: 7
				},{
					label: '8级',
					value: 8
				},{
					label: '9级',
					value: 9
				},{
					label: '10级',
					value: 10
				}],
				whereList: []
			}
		},
		methods: {
			init(){
				this.$http(this.$ApiList.GetWhere).then(res => {
					this.whereList = res.datas
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = {
							name: this.form.name,
							purpose: this.form.purpose,
							foot: JSON.stringify(this.form.foot)
						}
						if(this.form.data_model_id){
							data.data_model_id = this.form.data_model_id
							this.$http(this.$ptApiList.UpModel,data).then(res => {
								this.$layer.msg('修改成功')
								setTimeout(() => {
									this.$parent.getModelList(this.$parent.navList[this.$parent.status].id)
									this.$layer.closeAll()
								},1500)
							})
						}else{
							this.$http(this.$ptApiList.ModelAdd,data).then(res => {
								this.$layer.msg('添加成功')
								setTimeout(() => {
									this.$parent.getModelList(this.$parent.navList[this.$parent.status].id)
									this.$layer.closeAll()
								},1500)
							})
						}
					} else {
						return false;
					}
				});
			},
			addLevel(){
				this.form.foot.push({
					level: '',
					where: ''
				})
			},
			delLevel(index){
				console.log(index)
				this.form.foot.splice(index,1)
			},
		},
		created(){
			if(this.modelData.data_model_id){
				let arr = []
				this.modelData.foot_list.forEach(item => {
					arr.push({
						level: item.level,
						where: item.where
					})
				})
				this.form = {
					data_model_id: this.modelData.data_model_id,
					name:  this.modelData.name,
					purpose:  this.modelData.purpose,
					foot: arr
				}
			}
			this.init()
		}
	}
</script>
<style lang="scss">
	.add-model{
		.el-form-item__label{
			color: #FFF;
		}
		.label{
			color: #FFF;
			padding: 0 10px;
		}
		i.el-icon-circle-plus,i.el-icon-delete{
			color: #FFF;
			margin-left: 10px;
			font-size: 20px;
			display: inline-block;
			vertical-align: middle;
			cursor: pointer;
		}
	}
</style>